<template>
  
    <el-card class="personal-info">
      <h1>身份验证服务v1.0.0</h1>
      <br>
      <div class="info-header">
        <el-avatar shape="square" :size="150" class="avatar"></el-avatar>
        <div class="info-details">
          <h2 class="name">{{Info.name}}</h2>
          <div class="subtitle"></div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="info-body">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-descriptions title="基本信息" :column="1" border>
              <el-descriptions-item>
                <template #label>
                  性别
                </template>
                {{Info.sex}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  班级
                </template>
                {{Info.classes}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  管理员
                </template>
                {{Info.admin}}
              </el-descriptions-item>

            </el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-descriptions title="身份认证" :column="1" border>
              <el-descriptions-item>
                <template #label>
                  识别码
                </template>
                {{Info.id}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  正式会员
                </template>
                {{Info.member}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  初次入会时间
                </template>
                {{Info.memberTime}}
              </el-descriptions-item>

            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <div style="font-size: 14px;color: red;" v-if="sta">*您当前不是正式会员，请前往考试预约参加考试，及格后将成为正式会员</div>
    </el-card>
  </template>
  
  <script  lang="ts" setup>
    import { ServicePersonInfo } from '@/api/user/PersonInfo';
    import { onMounted, ref } from 'vue';
    import { ElMessage } from 'element-plus'

    const Info = ref({
        admin:' ',
        classes:' ',
        id:' ',
        member:' ',
        memberTime:' ',
        name:' ',
        sex:' '
    })

    const sta = ref(true)

    async function aa() {
            await ServicePersonInfo()
            .then(res=>{
                console.log(res)
                if(res.status === 200){
                  Info.value = res.data.data
                  ElMessage({
                    message: '身份信息获取成功',
                    type: 'success',
                  })
                  if(Info.value.member == '是'){
                    sta.value = false
                  }
                }
                else {
                  ElMessage({
                    message: "身份信息获取失败"+res.status,
                    type: 'warning',
                  })
                }
            })
            .catch(err=>{
                console.log(err)
            })
        }

    onMounted(()=>{
        aa();
        document.title="用户信息"
    })
  </script>
  
  <style scoped>
  .personal-info {
    width: 100%;
    max-width: 1000px; /* 增加最大宽度 */
    margin: 2rem auto; /* 使用 rem 单位以更好地缩放 */
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
  }
  
  .info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .avatar {
    margin-right: 2rem; /* 增加头像和信息之间的间距 */
  }
  
  .info-details h2.name {
    margin: 0;
    font-size: 2.5rem; /* 增大标题字体大小 */
    color: #333;
  }
  
  .info-details .subtitle {
    font-size: 1.2rem;
    color: #666;
    margin-top: 0.5rem;
  }
  
  .info-body {
    margin-top: 2rem;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .personal-info {
      width: 90%;
    }
  
    .info-header {
      flex-direction: column;
      align-items: center;
    }
  
    .avatar {
      margin-bottom: 1.5rem;
    }
  }
  </style>